import React from 'react';
import Helmet from 'react-helmet';

const Html = ({ content }) => {
  const head = Helmet.renderStatic();
  const attrs = head.htmlAttributes.toComponent();
  const { lang, ...rest } = attrs || {};

  return (
    <html {...rest} lang={lang || 'en'}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <title>Welcome to Razzle + Koa</title>
        <base href="/" />
        {head.title.toComponent()}
        {head.base.toComponent()}
        {head.meta.toComponent()}
        {head.link.toComponent()}

        <link rel="stylesheet" type="text/css" href="/css/antd.css" />
      </head>
      <body>
        <div id="root" dangerouslySetInnerHTML={{ __html: content || '' }}></div>
      </body>
    </html>
  );
}

export default Html;
